import BaseView from "../baseView.js";

export default class CinemasList extends BaseView {
    render(){
        $('#Content').html(`
            <h1>放映厅管理</h1>
            <hr>
            <button id='addstudentBtn' style="margin: 10px 0px 15px 15px" class='layui-btn layui-btn-normal'>
            添加<i class="layui-icon layui-icon-add-1"></i>
            </button> 
            <table id="showDatas" lay-filter="showlayui"></table>
        `);
        
    }

    handle() {
        $("#addLayuijs").html(`
       
          <script type="text/html" id="toolDemo">
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
          </script>
    
    
          <script>
          layui.use('table', function(){
            var table = layui.table;
    
            //监听行工具事件
            //test 是 table 原始容器的属性 lay-filter="对应的值"
            table.on('tool(showlayui)', function(obj){
              //obj.data 指的就是一行数据 
              var data = obj.data;   //一行数据就是一个json对象
              //console.log(obj)
              if(obj.event === 'del'){  //当点击删除时
                layer.confirm('真的要删除此行么？', function(index){
                  obj.del();    //只删除对应行（tr）的DOM结构并更新缓存，但并没有在数据库中删除
                  layer.close(index);
                  //向服务端发送删除指令
                  console.log(data._id)
                  $.ajax({
                    type:'delete',
                    url:'/theaters/delcinema/'+data._id,
                    dataType:'json',
                    success:(data)=>{
                      console.log(data);
                      if(data.code){
                        alert(data.msg);
                        window.location.hash="#/main/Showall"
                      }else{
                        alert(data.msg);
                      }
                    }
                  });
    
                });
              } else if(obj.event === 'edit'){   //当点击编辑时
                console.log("======>>>>编辑")
                window.location.hash="#/main/edittheaters/"+data._id
              }
            });
          
            //第一个实例
            table.render({
              elem: '#showDatas'
              ,url: '/theaters/getall' //数据接口
              ,page:true   //开启分页
              ,request: {
                pageName: 'currentpage' //页码的参数名称，默认：page
                ,limitName: 'pagesize' //每页数据量的参数名，默认：limit
              }
              ,limit:5    //修改每页显示的条数（默认）
              ,limits:[5,10,15,20]    //选择每页显示的条数	（选择）
              ,parseData:function(res){ 
                return {
                    "code": res.code, //解析接口状态
                    "msg":  res.msg, //解析提示文本
                    "count": res.totalNum, //解析数据长度
                    "data": res.datas //解析数据列表
                };
              }
              ,cols: [[ //表头
                {field: '_id', title: '放映厅编号', fixed: 'left'}
                ,{field: 'name', title: '放映厅名称',}
                ,{field: 'status', title: '是否营业',templet: function(d){
                  
                    //得到当前行数据，并拼接成自定义模板
                    if(d.status==true){
                      return '是'
                    }else{
                      return '否'
                    }
                }}
                //绑定工具栏
                ,{fixed: 'right', title:'操作', toolbar: '#toolDemo',width:'130'}
    
              ]]
             
            });
            
          });
          </script>
        `)
    
        //给添加按钮绑事件
        $("#addstudentBtn").click(() => {
          window.location.hash = "#/main/addtheaters";
        })
      }
}